<template>
  <a-modal
    :maskClosable="maskClosable"
    title="监控详情"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-table
      ref="table"
      rowKey="meter"
      size="middle"
      :pagination="false"
      :columns="columns"
      :dataSource="gDataSource"
    >
      <span slot="meter" slot-scope="text, record">
        {{ meterCnMap[record.meter] || switchMeterCnMap[record.meter] || record.meter }}
      </span>
      <span slot="volume" slot-scope="text, record">
        {{
          record.volume ? parseFloat(record.volume).toFixed(2) + meterUnitMap[record.meter] : "加载中"
        }}
      </span>
    </a-table>
  </a-modal>
</template>
<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "DetailModal",
  mixins: [GwListMixin],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      model: {},
      columns: [
        {
          title: "监控项",
          dataIndex: "meter",
          scopedSlots: { customRender: "meter" },
        },
        {
          title: "实时值",
          dataIndex: "volume",
          scopedSlots: { customRender: "volume" },
        },
      ],
      url: {
        list: "/statistics/latestSample",
      },
      meterCnMap: {
        "server.power": "服务器实时功耗",
        // "server.mem_total": "服务器内存总量",
        // "server.storage_total": "服务器存储总量",
        "server.cpu_frequency": "服务器CPU频率",
        "host.cpu_util": "服务器CPU利用率",
        // "host.memory_util": "服务器内存利用率",
        // "host.cpu_load_1min": "服务器CPU负载",
        // "server.bandWidth": "服务器带宽",
        // "server.storage_available": "服务器存储可用量",
        // "host.temperature": "服务器温度",
        // "server.mem_speed": "服务器内存速率",
        // "host.disk_read_rate": "服务器磁盘读速率",
        // "host.disk_write_rate": "服务器磁盘写速率",
        "server.cpu_margin_temperature": "服务器CPU温度余量",
        "server.cpu_temperature": "服务器CPU温度",
        "server.cpu_vr_temperature": "服务器CPU VR温度",
        "server.dimmg_temperature": "服务器内存温度",
        "server.fan_rpm": "服务器风扇转速",
        "server.frame_power": "服务器机框功率",
        "server.inlet_temperature": "服务器入风温度",
        "server.outlet_temperature": "服务器出风温度",
        "server.nvme_temperature": "服务器硬盘温度",
        "server.pch_temperature": "服务器芯片组温度",
        "server.ps_power": "服务器ps电源功率",
      },
      switchMeterCnMap: {
        "switcher.in_octets": "交换机收包速率",
        "switcher.out_octets": "交换机发包速率",
      },
      meterUnitMap: {
        "server.power": "W",
        // "server.mem_total": "MB",
        // "server.storage_total": "GB",
        "server.cpu_frequency": "GHz",
        "host.cpu_util": "%",
        // "host.memory_util": "%",
        "server.cpu_margin_temperature": "°C",
        "server.cpu_temperature": "°C",
        "server.cpu_vr_temperature": "°C",
        "server.dimmg_temperature": "°C",
        "server.fan_rpm": "rpm",
        "server.frame_power": "W",
        "server.inlet_temperature": "°C",
        "server.outlet_temperature": "°C",
        "server.nvme_temperature": "°C",
        "server.pch_temperature": "°C",
        "server.ps_power": "W",
        "switcher.in_octets": "KB/s",
        "switcher.out_octets": "KB/s",
        // "host.cpu_load_1min": "",
        // "server.bandWidth": "MB/s",
        // "server.storage_available": "GB",
        // "host.temperature": "°C",
        // "server.mem_speed": "MHz",
        // "host.disk_read_rate": "KB/s",
        // "host.disk_write_rate": "KB/s",
      },
      type: "",
      maskClosable: false,
      volumeMap: {},
      volumeList: [],
    };
  },
  watch: {
    volumeList(val) {
      if (val && val.length === this.gDataSource.length) {
        let list = [];
        this.gDataSource.forEach((item) => {
          item.volume = this.volumeMap[item.meter];
          list.push(item);
        });
        this.gDataSource = list;
      }
    }
  },
  methods: {
    showModal(record, type) {
      this.type = type;
      this.model = Object.assign({}, record);
      this.volumeList = [];
      this.visible = true;
      this.loadData();
    },
    loadData() {
      this.gDataSource = [];
      this.gQueryParam.resourceId = this.model.id;
      let map = {};
      if (this.type !== "node") {
        map = this.switchMeterCnMap;
      } else {
        map = this.meterCnMap;
      }
      Object.keys(map).forEach((item) => {
        this.gQueryParam.meter = item;
        this.gQueryParam.title = "精确管控与供电制冷联动-基础资源细粒度感知-指标监控";
        this.gDataSource.push({
          meter: item,
          volume: undefined,
        });
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          if (res.success) {
            // this.gDataSource.push({
            //   meter: map[item],
            //   key: item,
            //   volume: data,
            // });
            this.volumeMap[item] = res.data;
            this.volumeList.push({
              meter: item,
              volume: res.data,
            });
          }
        });
      });
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>
